<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>统计图表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
        <a href=""><cite>首页</cite></a>
        <a href=""><cite>数据统计</cite></a>
        <a>
          <cite>折线图</cite></a>
      </span>
    <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh"></i></a>
</div>
<div class="weadmin-body">
    <blockquote class="layui-elem-quote">
        订单管理系统数据可视化
    </blockquote>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 100%;height:400px;"></div>
</div>
<script src="//cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
<script type="text/javascript">
    //从后端调取数据
    var date_data = new Array()
    var user_data = new Array()
    var admin_data = new Array()
    var product_data = new Array()
    var order_data = new Array()
    $.get({
        url: "/index/chart",
        success: function (data) {
            date_data = data.date.split(",")
            user_data = data.user.split(",")
            admin_data = data.admin.split(",")
            product_data = data.product.split(",")
            order_data = data.order.split(",")
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '柱形图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['用户数量', '管理员数量', '商品数量', '订单数量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: date_data
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: "用户数量",
                    data: user_data,
                    type: 'bar',
                    showBackground: true
                },{
                    name: "管理员数量",
                    data: admin_data,
                    type: 'bar',
                    showBackground: true

                },{
                    name: "商品数量",
                    data: product_data,
                    type: 'bar',
                    showBackground: true
                },{
                    name: "订单数量",
                    data: order_data,
                    type: 'bar',
                    showBackground: true
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    })
</script>
</body>

</html>